// import 'highlight.js/styles/github.css'
// import 'highlight.js/styles/atelier-cave-dark.css'
@import 'highlight.js/styles/atom-one-dark-reasonable.css';

@textColor: #333;
@textFs: 16px;
@headAfterBgC: #eee;
@blockquoteBgC: #f5f5f5;
@blockquoteBC: #eee;
@tableFs: 14px;
@tableBC: #cccccc91;
@tableThC: #fff;
@tableThBgC: #666;
@tableThBC: #505050;
@tableTdBC: #ccc;
@codespanC: darkorange!important;
@imageTitleC: #f7f7f7;
@imageTitleFs: 12px;

.essay-heading {
    position: relative;
    color: @textColor;
}
.essay-heading_level-1,
.essay-heading_level-2,
.essay-heading_level-3 {
    &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -8px;
        height: 1px;
        background-color: @headAfterBgC;
    }
}
.essay-code {
    padding-left: 10px;
}
.essay-codespan {
    color: @codespanC;
    span {
        color: @textColor;
    }
}
.essay-blockquote {
    position: relative;
    padding: 0 40px;
    margin: 0;
    overflow: hidden;
    background-color: @blockquoteBgC;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20px;
        width: 5px;
        background-color: @blockquoteBC;
    }
    .essay-paragraph {
        margin: 10px 0;
    }
}
.essay-table {
    font-size: @tableFs;
    border-collapse: collapse;
    border-color: @tableBC; 
    th {
        color: @tableThC;
        background-color: @tableThBgC;
        border-color: @tableThBC;
    }
    td {
        color: @textColor;
        border-color: @tableTdBC; 
    }
    th, td {
        padding: 5px 10px;
    }
}
.essay-image {
    text-align: center;
    .essay-image-title {
        margin-bottom: 5px;
        font-size: @imageTitleFs;
        color: @imageTitleC;
    }
}
.essay-paragraph,
.essay-ol,
.essay-ul {
    font-size: @textFs;
    color: @textColor;
}